<!--装货员端装货-->
<template>
  <div>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/index' }">装货员端</el-breadcrumb-item>
        <el-breadcrumb-item>截单操作</el-breadcrumb-item>
      </el-breadcrumb>

      <div class="card_search">
          <el-button @click="toWar">一键截单</el-button>
      </div>

      <el-form>
        <el-table
            ref="warRef"
            :data="warList"
            :header-cell-style = "headerStyle"
            :cell-style = "cellStyle"
            class="table"
            @selection-change="handleSelectionChange"
        >
    <!--      <el-table-column type="selection"/>-->
        <!--      <el-table-column type="selection"/>-->
              <el-table-column type="expand" min-width="4%">
                <template #default="props">
        <!--          <div class="good_list">-->
        <!--            <dl v-for="item in props.row.detailedEntities" :key="item.id">-->
        <!--              <dt><img :src="item.images" alt="good"></dt>-->
        <!--              <dd>{{item.dishesName}}</dd>-->
        
        <!--            </dl>-->
        <!--          </div>-->
                  <div v-if="props.row.vegetableList.length">
                    <div class="divSon">蔬菜类</div>
                    <el-table
                        :data="props.row.vegetableList"
                        :header-cell-style = "headerStyleSon"
                        :cell-style = "cellStyleSon"
                        class="tableSon"
                    >
                      <el-table-column property="dishesName" min-width="4%"></el-table-column>
                      <el-table-column property="purchaseQuantity" min-width="4%"></el-table-column>
                    </el-table>
                  </div>
                  <div v-if="props.row.meetList.length">
                    <div class="divSon">肉类</div>
                    <el-table
                        :data="props.row.meetList"
                        :header-cell-style = "headerStyleSon"
                        :cell-style = "cellStyleSon"
                        class="tableSon"
                    >
                      <el-table-column property="dishesName" min-width="4%"></el-table-column>
                      <el-table-column property="purchaseQuantity" min-width="4%"></el-table-column>
                    </el-table>
                  </div>
                  <div v-if="props.row.eggList.length">
                    <div class="divSon">蛋类</div>
                    <el-table
                        :data="props.row.eggList"
                        :header-cell-style = "headerStyleSon"
                        :cell-style = "cellStyleSon"
                        class="tableSon"
                    >
                      <el-table-column property="dishesName" min-width="4%"></el-table-column>
                      <el-table-column property="purchaseQuantity" min-width="4%"></el-table-column>
                    </el-table>
                  </div>
                  <div v-if="props.row.fishList.length">
                    <div class="divSon">水产类</div>
                    <el-table
                        :data="props.row.fishList"
                        :header-cell-style = "headerStyleSon"
                        :cell-style = "cellStyleSon"
                        class="tableSon"
                    >
                      <el-table-column property="dishesName" min-width="4%"></el-table-column>
                      <el-table-column property="purchaseQuantity" min-width="4%"></el-table-column>
                    </el-table>
                  </div>
                  <div v-if="props.row.bestList.length">
                    <div class="divSon">特产类</div>
                    <el-table
                        :data="props.row.bestList"
                        :header-cell-style = "headerStyleSon"
                        :cell-style = "cellStyleSon"
                        class="tableSon"
                    >
                      <el-table-column property="dishesName" min-width="4%"></el-table-column>
                      <el-table-column property="purchaseQuantity" min-width="4%"></el-table-column>
                    </el-table>
                  </div>
                  <div v-if="props.row.riceList.length">
                    <div class="divSon">大米类</div>
                    <el-table
                        :data="props.row.riceList"
                        :header-cell-style = "headerStyleSon"
                        :cell-style = "cellStyleSon"
                        class="tableSon"
                    >
                      <el-table-column property="dishesName" min-width="4%"></el-table-column>
                      <el-table-column property="purchaseQuantity" min-width="4%"></el-table-column>
                    </el-table>
                  </div>
                  <div v-if="props.row.cornList.length">
                    <div class="divSon">玉米类</div>
                    <el-table
                        :data="props.row.cornList"
                        :header-cell-style = "headerStyleSon"
                        :cell-style = "cellStyleSon"
                        class="tableSon"
                    >
                      <el-table-column property="dishesName" min-width="4%"></el-table-column>
                      <el-table-column property="purchaseQuantity" min-width="4%"></el-table-column>
                    </el-table>
                  </div>
                  <div v-if="props.row.fruitList.length">
                    <div class="divSon">水果类</div>
                    <el-table
                        :data="props.row.fruitList"
                        :header-cell-style = "headerStyleSon"
                        :cell-style = "cellStyleSon"
                        class="tableSon"
                    >
                      <el-table-column property="dishesName" min-width="4%"></el-table-column>
                      <el-table-column property="purchaseQuantity" min-width="4%"></el-table-column>
                    </el-table>
                  </div>
                  <div v-if="props.row.birdList.length">
                    <div class="divSon">禽类</div>
                    <el-table
                        :data="props.row.birdList"
                        :header-cell-style = "headerStyleSon"
                        :cell-style = "cellStyleSon"
                        class="tableSon"
                    >
                      <el-table-column property="dishesName" min-width="4%"></el-table-column>
                      <el-table-column property="purchaseQuantity" min-width="4%"></el-table-column>
                    </el-table>
                  </div>
                  <div v-if="props.row.meetliveList.length">
                    <div class="divSon">畜肉类</div>
                    <el-table
                        :data="props.row.meetliveList"
                        :header-cell-style = "headerStyleSon"
                        :cell-style = "cellStyleSon"
                        class="tableSon"
                    >
                      <el-table-column property="dishesName" min-width="4%"></el-table-column>
                      <el-table-column property="purchaseQuantity" min-width="4%"></el-table-column>
                    </el-table>
                  </div>
                  <div v-if="props.row.freeList.length">
                    <div class="divSon">赠品类</div>
                    <el-table
                        :data="props.row.freeList"
                        :header-cell-style = "headerStyleSon"
                        :cell-style = "cellStyleSon"
                        class="tableSon"
                    >
                      <el-table-column property="dishesName" min-width="4%"></el-table-column>
                      <el-table-column property="purchaseQuantity" min-width="4%"></el-table-column>
                    </el-table>
                  </div>
                </template>
              </el-table-column >
          <el-table-column property="single" label="订单号" show-overflow-tooltip min-width="15%"/>
		   <el-table-column property="cardAccount" label="卡号" min-width="10%"/>
		   <el-table-column property="cardType" label="卡类" min-width="15%"/>
          <el-table-column property="userName" label="昵称" min-width="10%"/>
          <el-table-column property="telephone" label="手机号" show-overflow-tooltip min-width="15%"/>
          <el-table-column property="address" label="地址" show-overflow-tooltip min-width="15%"/>
		  <el-table-column property="remark" label="备注" show-overflow-tooltip min-width="15%"/>
          <el-table-column label="下单时间" property="orderTime" min-width="10%">
            <!-- <template #default="scope">{{ scope.row.orderTime }}</template> -->
          </el-table-column>
		  <el-table-column label="配送时间" property="deliveryTime" min-width="10%">
		  </el-table-column>
          <el-table-column property="status" label="订单状态" min-width="10%"/>
        </el-table>
      </el-form>

      <el-pagination
          @current-change="handleCurrentChange"
          background
          layout="prev, pager, next"
          :total="total"
          :current-page="queryInfo.currentPage"
          :page-size="queryInfo.pageSize"
          class="pagination-container"
      />
  </div>
</template>

<script setup>
import {reactive, ref, getCurrentInstance, onMounted} from "vue";
// 渲染
const { proxy } = getCurrentInstance()
const total = ref(0)
const queryInfo = reactive({
  status: '已下单',
  currentPage: 1,
  pageSize: 9
})
// 提交id列表
const submitList = reactive([])

// 渲染
onMounted(() => {
  getBuyOrder()
})

// 需要装配的订单
const warList = reactive([])

// 修改el-table默认样式
const headerStyle = () => {
  return {
    'font-size':'20px',
    'color': 'black',
    'text-align': 'center'
  }
}
const cellStyleSon = () => {
  return {
    'background-color':'rgb(0,152,131)',
    'color': 'white',
    'text-align': 'center'
  }
}
const cellStyle = () => {
  return {
    'background-color':'rgb(57,62,74)',
    'color': 'white',
    'text-align': 'center',
    'border': '1px soild black',
  }
}

// table选择变化
const handleSelectionChange = val => {
  for (let i= 0; i< val.length; i++) {
    submitList.push(val[i].id)
  }
}

// 获取所有status为已下单的订单
const getBuyOrder = async () => {
  const {data: res} = await proxy.$http.WarehouseService.getOrder(queryInfo)
  // console.log(res.data.records)
  if (res.code !== 200) return proxy.$message.error('获取已下单订单数据失败')
  warList.length = 0
  // for (let i= 0; i< res.data.records.length; i++) {
  //   res.data.records[i].orderTime = res.data.records[i].orderTime.substring(0,10)
  //   warList.push(res.data.records[i])
  for (let i= 0; i< res.data.records.length; i++) {
    res.data.records[i].vegetableList=[]
    res.data.records[i].meetList=[]
    res.data.records[i].eggList=[]
    res.data.records[i].fishList=[]
    res.data.records[i].bestList=[]
    res.data.records[i].riceList=[]
    res.data.records[i].cornList=[]
    res.data.records[i].fruitList=[]
    res.data.records[i].birdList=[]
    res.data.records[i].meetliveList=[]
    res.data.records[i].freeList=[]
	res.data.records[i].orderTime = res.data.records[i].orderTime.substring(0,10)
    res.data.records[i].deliveryTime = res.data.records[i].deliveryTime.substring(0,10)
    for (let j = 0; j < res.data.records[i].detailedEntities.length; j++) {
      if (res.data.records[i].detailedEntities[j].dishType === '蔬菜') res.data.records[i].vegetableList.push(res.data.records[i].detailedEntities[j])
      if (res.data.records[i].detailedEntities[j].dishType === '肉') res.data.records[i].meetList.push(res.data.records[i].detailedEntities[j])
      if (res.data.records[i].detailedEntities[j].dishType === '蛋') res.data.records[i].eggList.push(res.data.records[i].detailedEntities[j])
      if (res.data.records[i].detailedEntities[j].dishType === '水产') res.data.records[i].fishList.push(res.data.records[i].detailedEntities[j])
      if (res.data.records[i].detailedEntities[j].dishType === '特产') res.data.records[i].bestList.push(res.data.records[i].detailedEntities[j])
      if (res.data.records[i].detailedEntities[j].dishType === '大米') res.data.records[i].riceList.push(res.data.records[i].detailedEntities[j])
      if (res.data.records[i].detailedEntities[j].dishType === '玉米') res.data.records[i].cornList.push(res.data.records[i].detailedEntities[j])
      if (res.data.records[i].detailedEntities[j].dishType === '水果') res.data.records[i].fruitList.push(res.data.records[i].detailedEntities[j])
      if (res.data.records[i].detailedEntities[j].dishType === '禽类') res.data.records[i].birdList.push(res.data.records[i].detailedEntities[j])
      if (res.data.records[i].detailedEntities[j].dishType === '畜肉') res.data.records[i].meetliveList.push(res.data.records[i].detailedEntities[j])
      if (res.data.records[i].detailedEntities[j].dishType === '赠品') res.data.records[i].freeList.push(res.data.records[i].detailedEntities[j])
    }
    warList.push(res.data.records[i])
  }
  total.value = res.data.total
  // console.log(res.data);
}

// 截单
const toWar = async () => {
  const {data: res} = await proxy.$http.WarehouseService.postOrder()
  if (res.code !== 200) return proxy.$message.error('截单失败')
  console.log(res);
  getBuyOrder()
  return proxy.$message.success('截单成功')

}

// 根据分页器切换每页的菜品
const handleCurrentChange = val => {
  queryInfo.currentPage = val
}
</script>

<style scoped lang="scss">
.card_search{
  display: flex;
  justify-content: right;
  height: 40px;
  width: 80%;
  margin: 10px auto;
  .el-button {
    font-size: 0.15rem;
    font-weight: bolder;
    background-color: rgb(0,152,131);
    height: 100%;
    color: white;
  }
  .el-button:hover {
    background-color: white;
    color: rgb(0,152,131);
  }
}

.table {
  width: 90%;
  left: 50%;
  transform: translateX(-50%);
  box-sizing: border-box;
  padding-top: 50px;
  margin-top: 50px;
}
.divSon {
  font-weight: bolder;
  font-size: 20px;
}
:deep(.el-table__body) {
  border-collapse: separate;
  border-spacing: 0 20px;
}
:deep(.el-table .el-table__expanded-cell) {
  background-color: transparent;
}
:deep(.el-table::before) {
  height: 0;
}
:deep(.el-table__body .el-button){
 border: 1px solid white;
 background-color: rgb(0,152,131);
}
:deep(.el-table__body .el-button:hover){
 color: rgb(0,152,131);
 background-color: white !important;
}
:deep(.el-table__body .el-table__expand-icon){
 color: white;
}

.good_list {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  dl {
    width: 150px;
    height: 150px;
    padding: 10px 25px;
    box-sizing: border-box;
    margin-left: 26px;
    margin-top: 20px;
    border: 2px solid rgba(75,66,49,0.8);
    dt{
      width: 100px;
      height: 100px;
      img {
        width: 100%;
      }
    }
    dd{
      height: 20px;
      width: 100px;
      margin-top: 10px;
      text-align: center;
    }
  }
}

.el-pagination{
  position: absolute;
  right: 8%;
  bottom: 2%
}
</style>
